

<template>
  <el-carousel :interval="4000" type="card" height="350px" style="margin-top: 20px;">
    <el-carousel-item v-for="item in lbt" :key="item.id" style="border-radius: 10px;">
      <img :src="item.url" alt="">
    </el-carousel-item>
  </el-carousel>
  <el-row style="margin: 20px 0px;">
    <el-col :span="5">
      <el-input v-model="form.productName" placeholder="搜索你想输入商品的名称"></el-input>
    </el-col>
    <el-col :span="2" style="margin-left: 5px;">
      <el-button type="primary" :icon="Search" @click="seler">搜索</el-button>
    </el-col>
  </el-row>
  <div class="classification">
    <div class="role">
      <div class="title">分类:</div>

      <div v-for="item, i in  form.tabbar" :key="item.id" class="list" :class="{ color: directionIndex == i }"
        @click="directionClick(i, item)"> <span>{{
          item
        }}</span>
      </div>
    </div>

  </div>

  <div class="user">
    <div class="user_list" v-for="item, i in form.Data" :key="item.id" @click="detailsy(item.productReferral, item.id)">
      <div class="user_listLeft">
        <img :src="item.productImg" alt="">
      </div>
      <div class="user_listRight">
        <div class="title">{{ item.productTag }}</div>
        <div>{{ item.productReferral }}</div>
        <div class="experience">￥{{ item.productPrice }}</div>

      </div>
    </div>
  </div>
  <div style="text-align: right;display: flex; justify-content: flex-end; margin-top: 20px;">
    <el-pagination layout="prev, pager, next" :total="(form.total / 10) * 10" @current-change="paging" />
  </div>

  <el-dialog v-model="form.dialogVisible" title="商品" width="30%">
    <span>{{ Spvalue }}</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="form.dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="ShoppingCart">
          加入购物车
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup >
import { ref, reactive } from "vue"
import { Careerorientation, lbt, } from '../utils/data/index.js'
import { Home, Tab, Shopping } from '../ApI/function/Home.js'
import {
  Search,
  Star,
} from '@element-plus/icons-vue'

const form = reactive({
  HomeIndex: 1,
  Data: null,
  total: null,
  tabbar: null,
  tagName: '', // 分类名称
  productName: '', //模糊查询
  dialogVisible: false,
  id: null
})

// 获取分类
const tabbar = () => {
  Tab().then(res => {
    form.tabbar = res.data
    form.tabbar.unshift('全部')
  })
}
tabbar()


// 获取分类
const Homeaxios = () => {
  Home({ pageNum: form.HomeIndex, tagName: form.tagName, productName: form.productName }).then(res => {
    form.Data = res.data.list
    form.total = res.data.total

  })
}
Homeaxios()
// 分类切换
const directionIndex = ref(0)
const directionClick = (i, val) => {
  if (val == '全部') {
    form.tagName = ''
  } else {
    form.tagName = val
  }
  directionIndex.value = i

  Homeaxios()
}
// 页面切换
const paging = (value) => {
  form.HomeIndex = value
  Homeaxios()
}
//搜索
const seler = () => {
  Homeaxios()
}
// 对话框
const Spvalue = ref('')
const detailsy = (value, id) => {
  form.dialogVisible = true
  Spvalue.value = value
  form.id = id
}

//加入购物车
const UserID = localStorage.getItem("id")
const ShoppingCart = () => {

  Shopping({ i: UserID, y: form.id }).then(res => {
    console.log(res)
    if (res.code == '0000') {
      ElMessage({
        message: res.data,
        type: 'success',
      })
    } else {
      ElMessage({
        message: res.data,
        type: 'warning'
      })
    }
  })
  form.dialogVisible = false
}

</script>

<style scoped lang="less">
.el-carousel__item img {
  width: 100%;
  height: 100%;
  // background-color: red;
  border-radius: 10p
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.pg {
  margin: 40px 0px;

  .el-col {
    height: 200px;
    background-color: pink;
    text-align: center;
  }
}

.classification {
  padding: 10px 20px;
  background-color: #F6F8FB;
  margin-top: 20px;

  .role {
    display: flex;
    align-items: center;
    cursor: pointer;

    .title {
      margin-right: 25px;
      font-size: 16px;

    }

    .list {
      padding: 3px;
      border-radius: 5px;
      font-size: 14px;
    }

    .color {
      background-color: #409EFF;
      color: #fff;
    }

    div {
      margin-right: 20px;
    }
  }

  div {
    margin-bottom: 10px;
  }

}

.user {
  display: grid;
  grid-template-columns: repeat(2, 1fr);

  .user_list {
    padding: 20px;
    background-color: #fff;
    margin: 10px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    cursor: pointer;


    .user_listLeft {

      flex: 1;
      background-color: red;

      img {
        width: 100%;
        height: 100%;
      }

    }

    .user_listRight {
      flex: 3;
      margin-left: 30px;

      div {
        margin-bottom: 10px;
      }

      .title {
        font-size: 16px;
      }

      span {
        font-size: 12px;
      }

      .skill {
        span {

          background-color: #F2F2F4;
          padding: 5px 10px;
          border-radius: 10px;
        }
      }

      .experience {
        font-size: 14px;
        color: #F03726;
        // margin: 10px 0px;
      }
    }
  }
}
</style>